<!DOCTYPE html>
<html lang="en">
<!--头部信息-->
<head>
    <meta charset="utf-8">
    <title>散布瘟疫</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">

    <script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

    <style>
        body {
            background-color: #ffffff;
        }

        .common {
            text-align: center;
            float: right;
            font-size: 18px;
            padding-left: 5px
        }
    </style>

</head>
<!--散布瘟疫(弹出层)-->
<body>
<form id="edit" action="">
    <div class="layui-form layuimini-form">
        <div class="layui-container">
            <!--第一行-->
            <div class="layui-row">
                <div class="layui-col-md2">
                    <div class="grid-demo grid-demo-bg1">
                    </div>
                </div>
                <div class="layui-col-md8">
                    <div class="grid-demo common">
                        <p>总有些事你不愿提，总有些人你不愿见</p>
                        <p>死神不能杀人，但能散布瘟疫</p>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="grid-demo grid-demo-bg1">
                    </div>
                </div>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <div>
                    <!--第二行-->
                    <div class="layui-row">
                        <div class="layui-col-md2">
                            <div class="grid-demo grid-demo-bg1">
                            </div>
                        </div>
                        <div class="layui-col-md8">
                            <div class="grid-demo" style="text-align: center;padding-left: 300px">
                                <!--瘟疫种类-->
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">瘟疫种类：</label>
                                    <div class="layui-input-block" style="width: 95%">
                                        <select name="plague" id="plague">
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md2">
                            <div class="grid-demo grid-demo-bg1">
                            </div>
                        </div>
                    </div>
                    <!--第三行-->
                    <div class="layui-row">
                        <div class="layui-col-md2">
                            <div class="grid-demo grid-demo-bg1">

                            </div>
                        </div>
                        <div class="layui-col-md8">
                            <div class="grid-demo" style="text-align: center;padding-left: 300px">
                                <!--散布地区-->
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">散布地区：</label>
                                    <div class="layui-input-block" style="width: 95%">
                                        <select name="area" id="area" lay-filter="area">
                                            <option value="" disabled="disabled">请选择</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md2">
                            <div class="grid-demo grid-demo-bg1">

                            </div>
                        </div>
                        <!--第四行-->
                        <div class="layui-row">
                            <div class="layui-col-md2">
                                <div class="grid-demo grid-demo-bg1">
                                </div>
                            </div>
                            <div class="layui-col-md8">
                                <div class="grid-demo" style="text-align: center;padding-left: 300px">
                                    <!--瘟疫源体-->
                                    <div class="layui-form-item">
                                        <label class="layui-form-label ">瘟疫源体：</label>
                                        <div class="layui-input-block" style="width: 95%">
                                            <select name="lifeuser" id="lifeuser">
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="grid-demo grid-demo-bg1">
                                </div>
                            </div>
                        </div>
                        <!--第五行-->
                        <div class="layui-row">
                            <div class="layui-col-md2">
                                <div class="grid-demo grid-demo-bg1">
                                </div>
                            </div>
                            <div class="layui-col-md8">
                                <div class="grid-demo" style="text-align: center;padding-left: 300px">
                                    <!--瘟疫详情-->
                                    <div class="layui-form-item layui-form-text">
                                        <label class="layui-form-label">瘟疫详情：</label>
                                        <div class="layui-input-block" style="width: 95%">
                <textarea placeholder="请输入内容" class="layui-textarea" name="description" id="description"
                          style="height: 50px;resize:none;"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="grid-demo grid-demo-bg1">
                                </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <!--第三行-->
                        <div class="layui-row">
                            <div class="layui-col-md2">
                                <div class="grid-demo grid-demo-bg1">
                                </div>
                            </div>
                            <div class="layui-col-md8">
                                <div class="grid-demo" style="text-align: center;padding-left: 320px">
                                    <!--散布瘟疫-->
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="float: left;width: 300px">
                                            <button style="width: 200px" type="button" class="layui-btn layui-btn-danger" lay-submit
                                                    lay-filter="saveBtn">散布瘟疫
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <div class="grid-demo grid-demo-bg1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;


        /*填充下拉列表框*/
        getArea();
        getPlague();

        /*下拉列表【瘟疫种类】*/
        function getPlague() {
            $.ajax({
                type: "GET",
                url: "/getPlagueList",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#plague").append("<option value=\"" + data[i].plagueId + "\">" + data[i].plagueName +
                            "</option>");
                        $('#plague').val(data[0].plagueId);
                    }
                    layui.form.render("select");
                }
            });
        }


        /*下拉列表【散布地区】*/
        function getArea() {
            $.ajax({
                type: "GET",
                url: "/getAreaList",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#area").append("<option value=\"" + data[i].id + "\">" + data[i].districtName +
                            "</option>");
                        $('#area').val("");
                    }
                    layui.form.render("select");
                }
            });
        }

        form.on('select(area)', function (data) {
            /*地区列表该表用户改变*/
            $.ajax({
                type: "GET",
                //根据地区ID查询用户信息
                url: "/getUserlifeByAreaId/" + data.value,
                dataType: "json",
                success: function (data) {
                    if (data.length === 0) {
                        layer.msg("该地区没有用户信息！", {time: 1000});
                        $("#lifeuser").find('option').remove();
                    } else {
                        $("#lifeuser").find('option').remove();
                        for (var i = 0; i < data.length; i++) {
                            $("#lifeuser").append("<option value=\"" + data[i].lifeId + "\">" + data[i].lifeName +
                                "</option>");
                            $("#lifeuser").val(data[0].lifeId);
                        }
                        layer.msg("查到" + data.length + "条用户信息！", {time: 800});
                    }
                    layui.form.render("select");
                }
            });
        });


        /*散布瘟疫事件处理*/
        form.on('submit(saveBtn)', function (data) {
            var plague = $("#plague").val(),
                area = $("#area").val(),
                userlife = $("#lifeuser").val(),
                description = $('#description').val(),
                plagueName = $("#plague option:selected").text(),
                areaName = $("#area option:selected").text();
            if (area === null) {
                layer.msg("请选择散布地区！", {icon: 0, time: 800});
                return;
            }
            if (userlife === null) {
                layer.msg("请选择瘟疫源体！", {icon: 0, time: 800});
                return;
            }
            layer.confirm("确认向" + areaName + "散布" + plagueName + "瘟疫吗？", {icon: 3}, function (index) {
                /*发送散布瘟疫请求*/
                $.ajax({
                    type: 'PUT',
                    dataType: 'json',
                    url: '/sendPlague/' + plague + '/' + area + '/' + userlife + '/' + description,
                    error: function () {
                        layer.alert("系统错误！");
                    },
                    success: function (result) {
                        if (result['msg'] === 'success') {
                            layer.alert('瘟疫散布成功!\n\r死亡人数:' + result['dieCountNum'],
                                {
                                    title: '成功',
                                    skin: 'layui-layer-molv',
                                    btn: ['返回'],
                                    anim: 1,
                                    icon: 6,
                                    yes: function () {
                                        parent.layui.table.reload('testId', {
                                            page: {
                                                curr: 1
                                            },
                                        });
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        } else {
                            layer.alert('瘟疫散布失败，请重试？',
                                {
                                    title: '错误',
                                    skin: 'layui-layer-molv',
                                    btn: ['重试', '退出'],
                                    anim: 1,
                                    icon: 5,
                                    yes: function (index) {
                                        layer.close(index);
                                    },
                                    btn2: function () {
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        }
                    }
                });
            });
            return false;
        });


        /*永久删除事件*/
        form.on('submit(delBtn)', function (data) {
            var id = $("#delId label").text();
            layer.confirm("确认永久删除该用户吗？", {icon: 3}, function (index) {
                /*发送修改请求*/
                $.ajax({
                    type: 'DELETE',
                    dataType: 'text',
                    url: '/deleteByid/' + id,
                    error: function () {
                        layer.alert("系统错误！");
                    },
                    success: function (result) {
                        if (result === 'success') {
                            layer.alert('删除成功！',
                                {
                                    title: '成功',
                                    skin: 'layui-layer-molv',
                                    btn: ['返回'],
                                    anim: 1,
                                    icon: 6,
                                    yes: function () {
                                        parent.layui.table.reload('testId', {
                                            page: {
                                                curr: 1
                                            },
                                        });
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        } else {
                            layer.alert('删除失败，请重试？',
                                {
                                    title: '错误',
                                    skin: 'layui-layer-molv',
                                    btn: ['重试', '退出'],
                                    anim: 1,
                                    icon: 5,
                                    yes: function (index) {
                                        layer.close(index);
                                    },
                                    btn2: function () {
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        }
                    }
                });
            });
            return false;
        });
    });
</script>
</body>
</html>